<template>
	<MyPage title="设置多规格" :isback="true">
		<view slot="right"><u-button type="error" size="mini" @click="formSubmit">保存并返回</u-button></view>
		<view slot="gBody">
			<u-form ref="uForm">
				<view class="view-box" v-for="(item,index) in specificationsList" :key="index">
					<view class="close-icon" @click="removeSpecifications(index)" v-if="index>0">
						<u-icon name="close" color="#fff" size="24"></u-icon>
					</view>
					<u-form-item labelWidth="150" label="" :borderBottom="false" class="type-title">
						<u-input v-model="specificationsList[index].type" placeholder="请输入类别，如规格、颜色、形状..." maxlength="20" :trim="true" />
						<u-button size="mini" type="error" plain class="right-btn" solt="right" @click="typeAdd(index)" style="margin-right:20rpx">+</u-button>
					</u-form-item>
					<u-form-item labelWidth="150" :borderBottom="false" v-for="(child,childIndex) in item.typeList" :key="childIndex" class="type-list">
						<u-input v-model="specificationsList[index].typeList[childIndex]" placeholder="请输入分类内容,如具体配置..." maxlength="20" :trim="true" />
						<u-button size="mini" plain class="right-btn" solt="right" @click="typeReduce(index,childIndex)" v-if="childIndex>0">-</u-button>
					</u-form-item>
				</view>
				<view class="view-box add-specifications red" @click="addSpecifications">+添加规格</view>
				<view class="view-box">
					<view class="title">
						<view class="right red"><u-icon name="list" color="#B00E0E" size="26" class="margin-right10"></u-icon>批量</view>价格列表
					</view>
					<view class="price-sheet">
						<view class="list" v-for="(item,index) in priceList" :key="index" @click="listClick(item,index)">
							<view class="list-title">{{item.title}}</view>
							<view class="price">
								<text class="red">￥{{item.price}}</text>
								<text class="small grey">成本价：{{item.costPrice}}</text>
							</view>
							<u-icon name="arrow-right" color="#ccc" size="26" class="right-icon"></u-icon>
						</view>
					</view>
				</view>
				

			</u-form>
		</view>
	</MyPage>
</template>		

<script>
import mixin from "@/libs/mixin.js";
import { savediy } from '@/api/my.js'
export default {
	mixins: [mixin],
	data() {
		return {
			specificationsList:[
				{
					type:'规格',
					typeList: ['','']
				}
			]
		}
	},
	computed:{
		//价格列表
		priceList(){
			function enumerate(dataArr,splitStr){
				let endArr = [];
				compose(0,'');
				function compose(level,count){
					let curList = dataArr[level].typeList;
					curList.forEach((item,index)=>{
						if( item ){
							if( count ){
								var addCount = count+splitStr+item;
							}else{
								var addCount = count+item;
							}
							if (level != dataArr.length-1) {
								compose(level+1,addCount);
							}else{
								endArr.push({
									title:addCount,
									price:'100',
									costPrice:'90'
								});
							}
						}
					});
				};
				return endArr;
			};
			return enumerate(this.specificationsList,' / ')
		}
	},
	onLoad() {
	},
	onReady() {
	},
	methods: {
		//添加和删除分类内容
		typeAdd(index) {
			this.specificationsList[index].typeList.push("");
		},
		typeReduce(index,childIndex) {
			this.$delete(this.specificationsList[index].typeList,index);
		},
		//添加和删除规格
		addSpecifications(){
			if( this.specificationsList.length<5 ){
				this.specificationsList.push({
					type:'',
					typeList: ['','']
				});
			}else{
				uni.showToast({
					title: '最多只能添加5种规格！',
					icon:'none'
				})
			}
		},
		removeSpecifications(index){
			this.$delete(this.specificationsList,index);
		},
		//加个列表点击
		listClick(item,index){
			
		},
		// 提交登录
		formSubmit(){
			if (1) {
				this.$utils.navigateTo('/diy/goods-add/goods-add');
				// savediy(this.form).then(res=>{
				// 	if(res.list.err == 0){
				// 		this.$utils.switchTab('/my/my');
				// 	}else{
				// 		uni.showToast({
				// 			title: res.list.msg,
				// 			icon:'none'
				// 		})
				// 	}
				// }).catch(err=>{
				// 	uni.showToast({
				// 		title: res.msg,
				// 		icon:'none'
				// 	})
				// });
			}
		}
	}
}
</script>

<style lang="scss">
page{
	background:#f3f3f3;
}
</style>
<style lang="scss" scoped>
.view-box{
	position: relative;
	margin-top:15rpx;
	background: #fff;
	padding: 30rpx 40rpx;
	border-radius: 20rpx;
	.close-icon{
		position:absolute;
		right:0;
		top:0;
		line-height: 1.1em;
		padding:5rpx 6rpx 12rpx 16rpx;
		background: #ccc;
		border-radius: 0 0 0 40rpx;
	}
	.type-title{
		padding:0 0 10rpx;
		/deep/ .u-input__input{
			font-size:30rpx;
			border-bottom: 1px #f1f1f1 solid;
		}
	}
	.type-list{
		border-radius: 15rpx;
		border-bottom: none;
		margin-bottom:8rpx;
		padding: 0 20rpx;
		background:#f1f1f1;
	}
	.title{
		font-weight: bold;
		.right{
			font-size:24rpx;
			font-weight: normal;
		}
	}
}
.add-specifications{
	padding:22rpx 0;
	text-align: center;
	font-size: 24rpx;
}
.price-sheet{
	margin-top:10rpx;
	.list{
		position:relative;
		display: flex;
		justify-content: space-between;
		padding:10rpx 40rpx 10rpx 0;
		border-bottom:1px #eee solid;
		.price{
			width:200rpx;
			text-align: right;
			text{
				display: block;
				font-size:28rpx;
				&.small{
					font-size:20rpx;
				}
			}
		}
		.right-icon{
			position: absolute;
			right:0;
			top:30rpx;
		}
	}
}


.btn-view{
	height:180rpx;
	.btn{
		position:fixed;
		left:4%;
		bottom:30rpx;
		z-index:10;
		width:92%;
	}
}
</style>